<template>
  <div>
    <el-dialog
      title="题目预览"
      :visible="showDialog"
      @close="closeDialog"
    >
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple"><span>【题型】:{{previewQuestionType()}}</span></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light"><span>【编号】:{{preView1.number}}</span></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"><span>【难度】:{{previewDifficulty()}}</span></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light"><span>【标签】:{{preView1.tags}}</span></div>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple"><span>【学科】:{{preView1.subject}}</span></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light"><span>【目录】:{{preView1.catalog}}</span></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"><span>【方向】:{{preView1.direction}}</span></div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            【题干】：
          </div>
        </el-col>
        &nbsp;
        <el-col :span="24">
          <div
            class="grid-content bg-purple-dark"
            style="color:blue;"
          >
            {{preView1.question}}
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row v-if="preView1.questionType==='1'">
        <el-col :span="24">
          <div>
            {{'单选题'}} 选项：（以下选中的选项为正确答案）
          </div>
        </el-col>
        <el-col
          v-for="item in oPTions"
          :key="item.id"
        >
          <el-radio-group v-model="groupModel">
            <el-radio :label="item.isRight">{{item.code}}</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row v-else-if="preView1.questionType==='2'">
        <el-col :span="24">
          <div>
            {{'多选题'}} 选项：（以下选中的选项为正确答案）
          </div>
        </el-col>
        <el-col
          v-for="item in oPTions"
          :key="item.id"
        >
          <el-checkbox-group v-model="groupModel1">
            <el-checkbox :label="item.isRight">{{item.code}}:{{item.title}}</el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="24">
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          【参考答案】：<el-button
            type="danger"
            @click="log=!log"
          >点击播放视频</el-button>
        </el-col>
        <video
          v-if="log"
          :src="preView1.videoURL"
          width="30%"
          autoplay
          controls
          loop
        ></video>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          【答案解析】：{{preView1.answer}}
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          【题目备注】：{{preView1.remarks}}
        </el-col>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="closeDialog"
        >关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    preView1: {
      type: Object,
      default: () => {
        return {}
      }
    },
    oPTions: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      log: false,
      difficulty: '',
      groupModel: 1,
      groupModel1: [1]
    }
  },
  created () {},
  methods: {
    closeDialog () {
      this.$emit('update:showDialog', false)
      this.log = false
    },
    previewQuestionType () {
      // console.log(data)
      if (this.preView1.questionType === '1') {
        this.showIf = true
        return '单选'
      } else if (this.preView1.questionType === '2') {
        this.showElseIf = true
        return '多选'
      } else {
        return '简答'
      }
    },
    // 判断难度
    previewDifficulty () {
      if (this.preView1.questionType === '1') {
        return '简单'
      } else if (this.preView1.questionType === '2') {
        return '一般'
      } else {
        return '困难'
      }
    }

    // this.preView1.difficulty = difficulty.find(
    //   (item) => item.value === +this.preView1.difficulty
    // ).label
    // this.preView1.questionType = questionType.find(
    //   (item) => item.value === +this.preView1.questionType
    // ).label
    // this.preView1.question = this.preView1.question.replace(/<[^>]+>/g, '')
    // this.preView1.answer = this.preView1.answer.replace(/<[^>]+>/g, '')
  }
}
</script>

<style lang="scss" scoped>
</style>
